<template>
  <div class="sidebar" :class="{ open: visible }">
    <div class="sidebar-header">
      <span>功能导航</span>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
    
    <!-- 传感器数据显示区域 -->
    <div class="sidebar-section sensor-section">
      <div class="sensor-card">
        <div class="sensor-row">
          <div class="sensor-item">
            <div class="sensor-icon">🌡️</div>
            <div class="sensor-info">
              <div class="sensor-label">温度</div>
              <div class="sensor-value">{{ temperature.toFixed(1) }}°C</div>
            </div>
          </div>
          <div class="sensor-item">
            <div class="sensor-icon">💧</div>
            <div class="sensor-info">
              <div class="sensor-label">湿度</div>
              <div class="sensor-value">{{ humidity.toFixed(1) }}%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="sensor-status">
        <span class="status-indicator" :class="{ connected: isConnected }"></span>
        <span>{{ isConnected ? '传感器已连接' : '传感器未连接' }}</span>
      </div>
    </div>
    
    <!-- 温湿度历史记录图表区域 -->
    <div class="sidebar-section chart-section">
      <!-- 温度图表区域 -->
      <div class="chart-subsection">
        <div class="chart-subtitle">温度 (°C)</div>
        <div class="chart-container">
          <canvas ref="tempChartCanvas" width="250" height="120"></canvas>
        </div>
      </div>
      
      <!-- 湿度图表区域 -->
      <div class="chart-subsection">
        <div class="chart-subtitle">湿度 (%)</div>
        <div class="chart-container">
          <canvas ref="humidityChartCanvas" width="250" height="120"></canvas>
        </div>
      </div>
     
      <div class="chart-info">
        <!-- <div class="info-item">
          <span>实时数据: {{ chartData.recent.temperature.length }}/3600</span>
        </div>
        <div class="info-item">
          <span>小时数据: {{ chartData.hourly.temperature.length }}/1440</span>
        </div> -->
        <div class="info-item">
          <span>最后更新: {{ lastUpdateTime }}</span>
        </div>
        <div class="info-item real-time-indicator">
          <span>🔄 实时更新中</span>
        </div>
      </div>
    </div>
    
    <div class="sidebar-section">
      <button class="sidebar-btn" @click="$router.push('/map')">加载地图</button>
      <button class="sidebar-btn" disabled>其他功能</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppSidebar',
  props: {
    visible: Boolean,
    logs: Array,
    isConnected: Boolean,
    temperature: {
      type: Number,
      default: 0
    },
    humidity: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 分层数据存储
      chartData: {
        // 最近1小时：每秒一个点（最多3600个）
        recent: {
          timestamps: [],
          temperature: [],
          humidity: [],
          labels: []
        },
        // 最近24小时：每分钟一个点（最多1440个）
        hourly: {
          timestamps: [],
          temperature: [],
          humidity: [],
          labels: []
        }
      },
      dataCollectionInterval: null,
      lastUpdateTime: '',
      connectionTime: null
    };
  },
  mounted() {
    this.loadHistoricalData();
    this.startDataCollection();
  },
  
  beforeUnmount() {
    this.stopDataCollection();
  },
  
  methods: {
    loadHistoricalData() {
      try {
        const savedData = localStorage.getItem('ros2FrontHistoricalData');
        if (savedData) {
          const parsedData = JSON.parse(savedData);
          
          // 加载分层数据
          if (parsedData.recent) {
            this.chartData.recent = parsedData.recent;
          }
          if (parsedData.hourly) {
            this.chartData.hourly = parsedData.hourly;
          }
          
          // 加载连接时间
          if (parsedData.connectionTime) {
            this.connectionTime = parsedData.connectionTime;
          }
        }
        
        // 如果没有连接时间，设置一个默认值（当前时间）
        if (!this.connectionTime) {
          this.connectionTime = new Date().toISOString();
        }
      } catch (error) {
        console.error('加载历史数据失败:', error);
        // 如果加载失败，设置默认连接时间
        this.connectionTime = new Date().toISOString();
      }
    },
    
    startDataCollection() {
      // 启动数据收集定时器，每秒收集一次数据
      this.dataCollectionInterval = setInterval(() => {
        if (this.isConnected) {
          // 分别检查温度和湿度，温度有值就收集，湿度必须大于0才收集
          if (this.temperature !== 0 || this.humidity > 0) {
            this.addDataPoint(this.temperature, this.humidity);
          }
        }
      }, 1000); // 每秒收集一次
    },
    
    stopDataCollection() {
      if (this.dataCollectionInterval) {
        clearInterval(this.dataCollectionInterval);
        this.dataCollectionInterval = null;
      }
    },
    
    addDataPoint(temp, hum) {
      const now = new Date();
      const timestamp = now.getTime();
      const label = this.formatTime(now);
      
      // 添加到最近数据（每秒）
      this.chartData.recent.timestamps.push(timestamp);
      this.chartData.recent.temperature.push(temp);
      this.chartData.recent.humidity.push(hum <= 0 ? null : hum);
      this.chartData.recent.labels.push(label);
      
      // 限制最近数据为3600个点（1小时）
      if (this.chartData.recent.timestamps.length > 3600) {
        this.chartData.recent.timestamps.shift();
        this.chartData.recent.temperature.shift();
        this.chartData.recent.humidity.shift();
        this.chartData.recent.labels.shift();
      }
      
      // 每分钟聚合一次数据到hourly
      if (now.getSeconds() === 0) {
        this.aggregateToHourly();
      }
      
      this.lastUpdateTime = this.formatTime(now);
      this.saveHistoricalData();
      this.drawTempChart();
      this.drawHumidityChart();
    },
    
    saveHistoricalData() {
      try {
        localStorage.setItem('ros2FrontHistoricalData', JSON.stringify({
          recent: this.chartData.recent,
          hourly: this.chartData.hourly,
          connectionTime: this.connectionTime
        }));
      } catch (error) {
        console.error('保存历史数据失败:', error);
      }
    },
    
    formatTimeLabel(date) {
      return date.getSeconds().toString().padStart(2, '0') + 's';
    },
    
    formatTime(date) {
      return date.getHours().toString().padStart(2, '0') + ':' + 
             date.getMinutes().toString().padStart(2, '0') + ':' + 
             date.getSeconds().toString().padStart(2, '0');
    },
    
    drawTempChart() {
      const canvas = this.$refs.tempChartCanvas;
      if (!canvas) return;
      
      const ctx = canvas.getContext('2d');
      const width = canvas.width;
      const height = canvas.height;
      
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      // 绘制坐标轴
      this.drawAxes(ctx, width, height);
      
      // 使用recent数据（最近1小时，每秒一个点）
      // 过滤掉连接时间之前的数据
      const connectionTimestamp = this.connectionTime ? new Date(this.connectionTime).getTime() : 0;
      const filteredData = this.chartData.recent.temperature.filter((temp, index) => {
        if (temp === 0) return false;
        const dataTimestamp = this.chartData.recent.timestamps[index];
        return dataTimestamp >= connectionTimestamp;
      });
      
      if (filteredData.length < 2) return;
      
      // 计算温度范围
      const { min, max } = this.calculateRange(filteredData);
      
      // 绘制Y轴标签
      this.drawYAxisLabels(ctx, width, height, min, max);
      
      // 绘制折线
      this.drawLine(ctx, filteredData, '#e74c3c', min, max, width, height);
      
      // 绘制X轴时间标签
      this.drawLabels(ctx, width, height);
      
      // 绘制数据点标签
      this.drawDataPointLabels(ctx, filteredData, min, max, width, height);
    },
    
    drawHumidityChart() {
      const canvas = this.$refs.humidityChartCanvas;
      if (!canvas) return;
      
      const ctx = canvas.getContext('2d');
      const width = canvas.width;
      const height = canvas.height;
      
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      // 绘制坐标轴
      this.drawAxes(ctx, width, height);
      
      // 使用recent数据（最近1小时，每秒一个点）
      // 过滤掉连接时间之前的数据
      const connectionTimestamp = this.connectionTime ? new Date(this.connectionTime).getTime() : 0;
      const filteredData = this.chartData.recent.humidity.filter((hum, index) => {
        if (hum === null || hum <= 0) return false;
        const dataTimestamp = this.chartData.recent.timestamps[index];
        return dataTimestamp >= connectionTimestamp;
      });
      
      if (filteredData.length < 2) return;
      
      // 计算湿度范围
      const { min, max } = this.calculateRange(filteredData);
      
      // 绘制Y轴标签
      this.drawYAxisLabels(ctx, width, height, min, max);
      
      // 绘制折线
      this.drawLine(ctx, filteredData, '#4ecdc4', min, max, width, height);
      
      // 绘制X轴时间标签
      this.drawLabels(ctx, width, height);
      
      // 绘制数据点标签
      this.drawDataPointLabels(ctx, filteredData, min, max, width, height);
    },
    
    calculateRange(data) {
      if (data.length === 0) return { min: 0, max: 100 };
      
      // 过滤掉null值和0值，只保留有效数据
      const validData = data.filter(value => value !== null && value > 0);
      if (validData.length === 0) return { min: 0, max: 100 };
      
      const min = Math.min(...validData);
      const max = Math.max(...validData);
      const range = max - min;
      
      // 如果数据范围太小，扩大显示范围
      if (range < 2) {
        const center = (min + max) / 2;
        return {
          min: Math.max(0, center - 2),
          max: center + 2
        };
      }
      
      // 为实时图表添加合适的边距
      return {
        min: Math.max(0, min - range * 0.2),
        max: max + range * 0.2
      };
    },
    
    drawLine(ctx, data, color, min, max, width, height) {
      if (data.length < 2) return;
      
      const range = max - min;
      
      // 增加边距，为Y轴标签提供更多空间
      const margin = 25; // 从20增加到25
      const chartWidth = width - 2 * margin;
      const chartHeight = height - 30; // 调整为height - 30，与Y轴标签位置保持一致
      
      // 计算显示范围，与drawYAxisLabels保持一致
      let displayMin = min;
      let displayMax = max;
      
      if (range < 0.5) {
        const center = (min + max) / 2;
        displayMin = center - 0.5;
        displayMax = center + 0.5;
      } else if (range < 2) {
        const center = (min + max) / 2;
        displayMin = center - 1;
        displayMax = center + 1;
      }
      
      const displayRange = displayMax - displayMin;
      
      ctx.strokeStyle = color;
      ctx.lineWidth = 1.5;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      
      // 绘制线条，跳过null值
      ctx.beginPath();
      let hasStartedPath = false;
      
      data.forEach((value, index) => {
        // 跳过null值（无效的湿度数据）
        if (value === null || value === 0) return;
        
        const x = margin + (index / (data.length - 1)) * chartWidth;
        // 等比例缩放：最大值对应画布顶部，最小值对应画布底部
        const y = 15 + ((displayMax - value) / displayRange) * chartHeight;
        
        // 确保坐标在边界内
        const clampedY = Math.max(15, Math.min(height - 15, y));
        
        if (!hasStartedPath) {
          ctx.moveTo(x, clampedY);
          hasStartedPath = true;
        } else {
          ctx.lineTo(x, clampedY);
        }
      });
      
      // 只有当有有效数据时才绘制线条
      if (hasStartedPath) {
        ctx.stroke();
      }
    },
    
    drawLabels(ctx, width, height) {
      ctx.fillStyle = 'rgba(255, 255, 255, 1.0)'; // 从0.95提升到1.0，让字体更亮
      ctx.font = '10px Arial'; // 与Y轴刻度统一
      ctx.textAlign = 'center';
      
      // 增加边距，为Y轴标签提供更多空间
      const margin = 25; // 从20增加到25
      
      // 只显示两个标签：连接时间和当前时间
      if (this.chartData.recent.labels.length >= 2) {
        // 最左边标签：连接时间，向右偏移更多
        const startLabel = this.formatConnectionTime();
        const startX = margin + 15; // 从5增加到15，向右偏移更多
        const startY = height - 5; // 从8减少到5，更靠近底部
        ctx.fillText(startLabel, startX, startY);
        
        // 最右边标签：当前时间，向左偏移更多
        const endLabel = this.formatCurrentTime();
        const endX = width - margin - 15; // 从5增加到15，向左偏移更多
        const endY = height - 5; // 从8减少到5，更靠近底部
        ctx.fillText(endLabel, endX, endY);
      }
    },
    
    formatConnectionTime() {
      if (this.connectionTime) {
        const date = new Date(this.connectionTime);
        return date.getHours().toString().padStart(2, '0') + ':' + 
               date.getMinutes().toString().padStart(2, '0') + ':' + 
               date.getSeconds().toString().padStart(2, '0');
      }
      return '--:--:--';
    },
    
    formatCurrentTime() {
      const now = new Date();
      return now.getHours().toString().padStart(2, '0') + ':' + 
             now.getMinutes().toString().padStart(2, '0') + ':' + 
             now.getSeconds().toString().padStart(2, '0');
    },

    drawYAxisLabels(ctx, width, height, min, max) {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; // 从0.6提升到0.9，让字体更亮
      ctx.font = '10px Arial';
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';

      const margin = 25; // 从20增加到25

      // 计算数据范围
      const range = max - min;
      
      // 如果数据范围太小，扩大显示范围避免刻度重叠
      let displayMin = min;
      let displayMax = max;
      
      if (range < 0.5) {
        // 对于很小的范围，扩大显示范围
        const center = (min + max) / 2;
        displayMin = center - 0.5;
        displayMax = center + 0.5;
      } else if (range < 2) {
        // 对于较小的范围，适当扩大
        const center = (min + max) / 2;
        displayMin = center - 1;
        displayMax = center + 1;
      }

      // 让最大值真正占据画布最顶部，最小值占据画布最底部
      const maxY = 15; // 最顶部，只留少量空间给标签
      const minY = height - 15; // 最底部，只留少量空间给标签

      // 最高值刻度（顶部），整体向左微移，避免与底部时间标签过近
      ctx.fillText(displayMax.toFixed(1), margin - 4, maxY);

      // 最低值刻度（底部），整体向左微移，避免与底部时间标签过近
      ctx.fillText(displayMin.toFixed(1), margin - 4, minY);
    },

    drawDataPointLabels(ctx, data, min, max, width, height) {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      const margin = 25; // 从20增加到25
      const chartWidth = width - 2 * margin;
      const chartHeight = height - 30; // 调整为height - 30，与Y轴标签位置保持一致

      // 计算显示范围，与drawYAxisLabels保持一致
      const range = max - min;
      let displayMin = min;
      let displayMax = max;
      
      if (range < 0.5) {
        const center = (min + max) / 2;
        displayMin = center - 0.5;
        displayMax = center + 0.5;
      } else if (range < 2) {
        const center = (min + max) / 2;
        displayMin = center - 1;
        displayMax = center + 1;
      }
      
      const displayRange = displayMax - displayMin;

      // 只显示当前位置的温度值
      for (let i = 0; i < data.length; i++) {
        const value = data[i];
        
        // 只在最后一个点显示标签（当前位置）
        if (i === data.length - 1) {
          const x = margin + (i / (data.length - 1)) * chartWidth;
          // 等比例缩放：最大值对应画布顶部，最小值对应画布底部
          const y = 15 + ((displayMax - value) / displayRange) * chartHeight;

          // 确保坐标在边界内
          const clampedY = Math.max(15, Math.min(height - 15, y));

          // 只在有数据时绘制标签
          if (value !== null && value !== 0) {
            // 调整标签位置，避免与坐标轴重叠
            let labelX = x;
            let labelY = clampedY;
            
            // 当前位置标签，稍微向左偏移，向上偏移更多
            labelX = x +8;
            labelY = clampedY - 18; // 从15增加到18，向上偏移更多
            
            ctx.fillText(value.toFixed(1), labelX, labelY);
          }
        }
      }
    },
    
    // 绘制坐标轴（适用于两张图）
    drawAxes(ctx, width, height) {
      const margin = 25;
      const topY = 15;
      const bottomY = height - 15;
      const leftX = margin;
      const rightX = width - margin;
      
      ctx.save();
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      // Y轴
      ctx.moveTo(leftX, topY);
      ctx.lineTo(leftX, bottomY);
      // X轴
      ctx.moveTo(leftX, bottomY);
      ctx.lineTo(rightX, bottomY);
      ctx.stroke();
      ctx.restore();
    },
    
    // 将秒级数据聚合为分钟级数据
    aggregateToHourly() {
      const now = new Date();
      const minuteTimestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes()).getTime();
      const minuteLabel = this.formatTime(new Date(minuteTimestamp));
      
      // 计算最近一分钟的平均温度和湿度
      const recentTemps = this.chartData.recent.temperature.slice(-60);
      const recentHums = this.chartData.recent.humidity.slice(-60);
      
      const avgTemp = recentTemps.reduce((sum, temp) => sum + temp, 0) / recentTemps.length;
      const validHums = recentHums.filter(hum => hum !== null);
      const avgHum = validHums.length > 0 ? validHums.reduce((sum, hum) => sum + hum, 0) / validHums.length : null;
      
      // 添加到小时级数据
      this.chartData.hourly.timestamps.push(minuteTimestamp);
      this.chartData.hourly.temperature.push(avgTemp);
      this.chartData.hourly.humidity.push(avgHum);
      this.chartData.hourly.labels.push(minuteLabel);
      
      // 限制小时级数据为1440个点（24小时）
      if (this.chartData.hourly.timestamps.length > 1440) {
        this.chartData.hourly.timestamps.shift();
        this.chartData.hourly.temperature.shift();
        this.chartData.hourly.humidity.shift();
        this.chartData.hourly.labels.shift();
      }
    }
  },
  
  watch: {
    // 当传感器连接状态改变时
    isConnected(newVal) {
      if (newVal) {
        // 记录连接时间
        const now = new Date();
        this.connectionTime = now.toISOString();
        localStorage.setItem('connectionTime', now.toISOString());
        
        // 清空之前的历史数据，确保只显示连接时间之后的数据
        this.chartData.recent = {
          timestamps: [],
          temperature: [],
          humidity: [],
          labels: []
        };
        this.chartData.hourly = {
          timestamps: [],
          temperature: [],
          humidity: [],
          labels: []
        };
        
        this.startDataCollection();
      } else {
        this.stopDataCollection();
      }
    },
    
    // 当温度或湿度数据更新时，立即添加到历史记录
    temperature(newVal, oldVal) {
      if (newVal !== oldVal && this.isConnected && newVal !== 0) {
        // 温度有值就添加数据点，湿度可以为0
        this.addDataPoint(newVal, this.humidity);
      }
    },
    
    humidity(newVal, oldVal) {
      if (newVal !== oldVal && this.isConnected && newVal > 0) {
        // 湿度有值才添加数据点，温度可以为0
        this.addDataPoint(this.temperature, newVal);
      }
    }
  }
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  background: rgba(20, 30, 60, 0.98);
  color: #fff;
  box-shadow: 2px 0 16px rgba(0,0,0,0.2);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.sidebar.open {
  transform: translateX(0);
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 10px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}
.sidebar-section {
  padding: 18px 20px 0 20px;
}
.sidebar-btn {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(45deg, #2ed573, #17a2b8);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  opacity: 1;
}
.sidebar-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}
.chart-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 4px; /* 从8px减少到4px，进一步减少与传感器状态的距离 */
}

.chart-header {
  font-weight: bold;
  margin-bottom: 15px;
  color: #2ed573;
  font-size: 1.1rem;
}

.chart-subsection {
  margin-bottom: 12px; /* 从20px减少到12px */
}

.chart-subtitle {
  font-weight: bold;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
}

.chart-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 10px; /* 从15px减少到10px */
  margin-bottom: 6px; /* 从10px减少到6px */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(46, 213, 115, 0.2);
}



.chart-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.info-item {
  text-align: center;
}

.info-item.real-time-indicator {
  color: #2ed573; /* 实时更新指示器的颜色 */
  font-weight: bold;
  font-size: 0.9rem;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 传感器数据样式 */
.sensor-section {
  margin-bottom: 2px; /* 从6px减少到2px，进一步减少与图表区域的距离 */
}

.sensor-header {
  font-weight: bold;
  margin-bottom: 8px;
  color: #2ed573;
  font-size: 1.1rem;
}

.sensor-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(46, 213, 115, 0.2);
}

.sensor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sensor-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 10px;
  background: rgba(46, 213, 115, 0.1);
  border-radius: 8px;
  flex: 1;
  min-width: 0;
}

.sensor-item:first-child {
  margin-right: 4px;
}

.sensor-item:last-child {
  margin-left: 4px;
}

.sensor-icon {
  font-size: 1.5rem;
  margin-right: 12px;
  width: 40px;
  text-align: center;
}

.sensor-info {
  flex: 1;
}

.sensor-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.sensor-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: #2ed573;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px rgba(46, 213, 115, 0.5);
}

.sensor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4757;
  box-shadow: 0 0 5px #ff4757;
  animation: pulse 2s infinite;
}

.status-indicator.connected {
  background: #2ed573;
  bnox-shadow: 0 0 5px #2ed573;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}
@media (max-width: 480px) {
  .sidebar {
    width: 78vw !important;
    min-width: 0 !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: rgba(20, 30, 60, 0.95) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .sidebar-header {
    padding: 12px 16px 8px 16px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  }
  
  .close-btn {
    font-size: 1.5rem !important;
    padding: 4px !important;
  }
  
  .sidebar-section {
    padding: 8px 16px 0 16px !important;
    margin-top: 1px;
  }
  
  .sidebar-btn {
    margin-bottom: 8px !important;
    padding: 10px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
  }
  
  .sensor-header {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }
  
  .sensor-section {
    margin-bottom: 0px !important; /* 从6px减少到0px，完全消除间距 */
  }
  
  .chart-section {
    margin-top: 0px !important; /* 从1px减少到0px，完全消除间距 */
  }
  
  .sensor-card {
    padding: 8px !important; /* 从12px减少到8px */
    margin-bottom: 2px !important; /* 从4px减少到2px */
    border-radius: 8px !important;
  }
  
  .sensor-row {
    flex-direction: row !important;
    gap: 6px !important;
    justify-content: space-between !important;
  }

  .sensor-item {
    margin-bottom: 0 !important;
    padding: 8px !important;
    border-radius: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .sensor-icon {
    font-size: 1.2rem !important;
    margin-right: 8px !important;
    width: 30px !important;
  }
  
  .sensor-label {
    font-size: 0.8rem !important;
  }
  
  .sensor-value {
    font-size: 1.1rem !important;
  }
  
  .sensor-status {
    font-size: 0.8rem !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }
  
  .status-indicator {
    width: 6px !important;
    height: 6px !important;
  }
  
  .chart-section {
    margin-top: 12px !important;
  }
  
  .chart-header {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  
  .chart-subsection {
    margin-bottom: 8px !important; /* 从15px减少到8px */
  }
  
  .chart-subtitle {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }
  
  .chart-container {
    padding: 6px !important; /* 从10px减少到6px */
    border-radius: 8px !important;
    margin-bottom: 5px !important; /* 添加更小的底部间距 */
  }
  

  
  .chart-info {
    font-size: 0.7rem !important;
    gap: 3px !important;
  }
}
</style> 